<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
  <!--  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
</head>
<body>
<div id="app" class="demo">
  <div>
    <button @click="onClick">start</button>
  </div>
  <div style="margin-top: 10px">
    <button @click="onClick2">start2</button>
  </div>
  <p >{{time}}</p>
  <p style="word-break: break-all">{{text}}</p>
</div>

<script>
    const HelloVueApp = {
        data() {
            return {
                time: 0,
                text: ""
            }
        },
        methods: {
            onClick() {
                const start = Date.now();
                this.text = "";
                for (let index = 0; index < 5000; index++) {
                    this.text += `+${index}`
                }
                this.time = (Date.now() - start) / 1000;
            },
            onClick2() {
                const start = Date.now();
                let text = "";
                for (let index = 0; index < 5000; index++) {
                    text += `+${index}`
                }
                this.text = text;
                this.time = (Date.now() - start) / 1000;
            }
        }
    }
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>